<template>
        <!-- 提示模块-->
    <div class="refer" :style="{'background-color':isShow==true?'#eee':'#f0f2f5'}">
        <div v-show="isShow">
            <div>在线咨询 <span @click="show" class="clear">×</span></div>
            <div><span><i class="el-icon-phone-outline"></i></span>客服电话</div>
            <div><span><img :src="require('../assets/house/wechat.png')" alt=""></span>官方微信</div>
            <div ><img :src="require('../assets/house/erweima.png')" alt=""></div>
            <div @click="moveTop"><span><i class="el-icon-arrow-up"></i></span>返回顶部</div>
        </div>
        <div v-if="!isShow">
            <img :src="require('../assets/house/point.gif')" alt="" @click="show" class="point">
            <img :src="require('../assets/house/weixin.png')" alt="" @click="show">
            <img :src="require('../assets/house/shang.png')" alt="" @click="moveTop">
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            isShow:true
        }
    },
    mounted() {
        //提示模块随着滚动条的变化而变化
        window.onscroll=()=>{
            let height=document.documentElement.scrollTop;
            let refer=document.getElementsByClassName("refer")[0];
            refer.style.top=(740+height)+'px';
        }
    },
    methods:{
        //跳至顶部
        moveTop(){
            document.documentElement.scrollTop=0;
        },
        //模块转换显示
        show(){
            this.isShow=this.isShow?false:true;
        }
    }
}
</script>
<style scoped>
.refer{
    width: 120px;height: 160px;
    background-color:#eee;
    border-radius: 5px;
    position:absolute;
    right: 30px;top: 720px;
    transition: 0.5s linear;
}
.refer div{height: 40px;line-height: 40px;font-size: 12px;text-align: center;cursor: pointer;color: black;}
.refer>div div:first-child{background-color: #0aa1ed;color: white;font: bolder;border-top-left-radius: 5px;border-top-right-radius: 5px;}
.refer>div div:last-child:hover{color:#0aa1ed}
.refer>div div:nth-child(4){width:120px;height: 120px;position: absolute;left: -110px;top: 50px;display: none; }
.refer>div div:nth-child(3):hover{background-color: #999;}
.refer>div div:nth-child(3):hover +div{display: block;}
.refer .point{position:absolute;right:20px}
.refer .point+img{display: block;margin: 0 auto;}
.refer .clear{font: 20px bolder;transition: 0.5s;margin: 5px 0 0 10px;display: inline-block;}
.refer .clear:hover{transform: rotate(360deg);}
</style>